<template>
  <el-main>
    <h2>销售业务框架</h2>
    <div id="classify"></div>
  </el-main>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      let myChart = this.$echarts.init(document.getElementById("classify"));
      let data = {
        name: "超市销售类图",
        children: [
          {
            name: "1.新鲜蔬菜",
            children: [
              { name: "土豆/茎类", value: 8833 },
              { name: "豆类/芽类/菌菇类", value: 1732 },
              { name: "茄子/瓜类", value: 3623 },
              { name: "辣椒类/姜葱蒜", value: 3623 },
            ],
          },
          {
            name: "2.时令水果",
            children: [
              { name: "水果礼盒", value: 8833 },
              { name: "热带水果", value: 1732 },
              { name: "鲜果专区", value: 1732 },
            ],
          },
          {
            name: "3.粮油干货",
            children: [
              { name: "油类专区/品质好油", value: 8833 },
              { name: "家用调料/面粉", value: 1732 },
              { name: "品质大米/五谷杂粮", value: 3623 },
            ],
          },
          {
            name: "4.肉蛋水产",
            children: [
              { name: "蛋类", value: 8833 },
              { name: "火锅食材", value: 1732 },
              { name: "水产干货", value: 3623 },
            ],
          },
          {
            name: "5.新鲜肉类",
            children: [
              { name: "鲜肉类", value: 8833 },
              { name: "鱼类", value: 1732 },
              { name: "虾类", value: 3623 },
              { name: "贝类/蟹类", value: 3623 },
            ],
          },
          {
            name: "6.速冻速食",
            children: [
              { name: "米/饭/面", value: 8833 },
              { name: "速冻肉/速冻菜", value: 1732 },
              { name: "冷蔵熟食", value: 3623 },
            ],
          },
          {
            name: "7.休闲零食",
            children: [
              { name: "饼干曲奇", value: 8833 },
              { name: "蛋糕点心", value: 1732 },
              { name: "果干蜜饯", value: 3623 },
              { name: "肉类零食", value: 3623 },
            ],
          },
          {
            name: "8.酒水饮料",
            children: [
              { name: "饮用水", value: 8833 },
              { name: "碳酸饮料", value: 1732 },
              { name: "茶饮料", value: 1732 },
              { name: "营养保健", value: 1732 },
            ],
          },
          {
            name: "9.牛奶水饮",
            children: [
              { name: "牛奶会场", value: 8833 },
              { name: "儿童牛奶", value: 1732 },
              { name: "植物蛋白粉/驼奶粉", value: 1732 },
            ],
          },
        ],
      };
      let option = {
        tooltip: {
          trigger: "item",
          triggerOn: "mousemove",
        },
        series: [
          {
            type: "tree",
            id: 0,
            name: "tree1",
            data: [data],
            top: "10%",
            left: "8%",
            bottom: "22%",
            right: "40%",
            symbolSize: 7,
            edgeShape: "polyline",
            edgeForkPosition: "63%",
            initialTreeDepth: 3,
            lineStyle: {
              width: 3,
            },
            label: {
              backgroundColor: "#fff",
              position: "left",
              verticalAlign: "middle",
              align: "right",
            },
            leaves: {
              label: {
                position: "right",
                verticalAlign: "middle",
                align: "left",
              },
            },
            emphasis: {
              focus: "descendant",
            },
            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750,
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style scoped>
#classify {
  position: absolute;
  top: 40px;
  left: 100px;
  width: 90%;
  height: 100%;
  padding: 0;
  /* background-color: pink; */
  margin-left: 100px;
}
h2{
    position: absolute;
    left: 180px;
    top: 70px;
}
</style>
